<template>
	<view class="content">
		<template v-if="orderlist != ''">
			<view class="tuijian">
				<view class="tuijian_con" :style="{ backgroundImage: 'url(' + urls + '/app/section/secbj.png' + ')' }"
					v-for="(item, i) in orderlist" :key="i" v-if="orderlist != ''" @click="Detail(i)">
					<view class="sec_center">
						<view class="left" @click.stop="checkStatus(i)" v-if="status == 0">
							<image
								src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png"
								v-if="item.check == false"></image>
							<image
								src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png"
								v-else></image>
						</view>
						<view class="center">
							<view class="dengji_box_tl">
								<image  
									:src="item.level_icon"
									mode="scaleToFill" />
							</view>
							<image :src="item.prize_icon"></image>
						</view>
						<view class="right">
							<text class="name">{{ item.prize_name }}</text>
							<view class="">
								<text class="cont">￥：{{ item.price }}</text>
								<text style="float:right; color: #666666;font-size: 24rpx;">x{{ item.num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="orderlist == ''">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<u-popup mode="center" v-model="zengsongStatus" border-radius="20">
			<view class="zengsong_popop">
				<view class="pop_title">发货商品</view>

				<view class="bombtn flexs">
					<view class="right_bom flexs" @click="quxiao">
						取消
					</view>
					<view class="left_bom flexs" @click="submitDuihuan">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view class="footer" v-if="status == 0">
			<view class="top" @click="quanxuan">
				<image src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png"
					v-if="allStatus == false"></image>
				<image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png" v-else>
				</image>
				<text>全选</text>
				<view class="yiduihuan_box">
					<view class="one_box">
						已选择<text style="color: #FFAE2A;">{{ zongjijianshu }}</text>件
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="left" @click="bottomClick">确认发货
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			zengsongStatus: false, //赠送确认弹窗状态
			urls: this.$configs.urls,
			Shouhuoshow: false,
			orderlist: [],
			checkIndex: 0,
			page: 1,
			status: 0,
			order_id: "", //订单id
			jimaiyulan: {},
			allStatus: false,
			total_recovery_price: "",
			zongjia: 0,
			selectNumber: 0,
			querenhuanlist: [],
			zongjijianshu: 0,
			totalPage: 1
		};
	},
	onLoad(e) {
		this.order_id = e.order_id
	},
	onShow() {
		this.getlist()
	},
	onPullDownRefresh() {
		this.page = 1;
		this.orderlist = []
		this.getlist();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
		clearTimeout();
	},
	onReachBottom() {
		this.page++
		// ////console.log(`page:${this.page},total:${this.totalPage}`)
		if (this.page > this.totalPage) {
			uni.showToast({
				title: '已经到底了',
				icon: 'none'
			})
			return
		}
		this.getlist(2);
	},
	onHide() {
		this.page = 1;
		this.zongjia = 0;
		this.zengsongStatus = false;
		this.allStatus = false;
		this.selectNumber = 0
	},
	methods: {
		quxiao() {
			this.zengsongStatus = false;
		},
		//确定发货
		submitDuihuan() {
			let order_idarr = this.getCarIds().haveSel
			let list = []
			uni.navigateTo({
				url: '/cabinetPages/index/index?list=' + JSON.stringify(order_idarr) + '&order_id=' +
					order_idarr
			})
			this.getlist()
		},
		quanxuan() {

			this.allStatus = !this.allStatus;
			var orderlist = this.orderlist;
			for (let i = 0; i < orderlist.length; i++) {
				if (this.allStatus) {
					orderlist[i].check = true;
				} else {
					orderlist[i].check = false;
				}
			}
			if (this.getCarIds() == false) {
				this.selectNumber = 0
			} else {
				this.selectNumber = this.getCarIds().haveSel.length
			}
			this.zongji()
		},
		zongji() {
			this.zongjia = 0
			let arrprice = this.getCarIds().arrprice
			for (let i = 0; i < arrprice.length; i++) {
				this.zongjia += Number(arrprice[i])
			}
			this.zongjia = this.numFilter(this.zongjia)
		},
		//底部按钮点击
		bottomClick() {
			if (this.getCarIds() == false) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				})
				return
			}

			this.zongji()
			this.zengsongStatus = true;
		},
		//保留小数点后两位不四舍五入
		numFilter(value) {
			// 截取当前数据到小数点后三位
			let tempVal = parseFloat(value).toFixed(3)
			let realVal = tempVal.substring(0, tempVal.length - 1)
			return realVal
		},
		querenshouhuo(order_id) {
			this.order_id = order_id;
			this.Shouhuoshow = true;
		},
		getlist(type) {
			let data = {
				page: this.page,
				type: 1
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.order.exchangeList, data).then(res => {
				////console.log(res, "123213123")
				uni.hideLoading()
				this.totalPage = res.data.totalPage
				if (type == 2) {
					this.orderlist = this.orderlist.concat(res.data.list);
				} else {
					this.orderlist = res.data.list;
				}
			});
		},
		//多选
		checkStatus(shopIndex) {
			var that = this;
			let orderlist = that.orderlist;
			if (orderlist[shopIndex].check == false) {
				orderlist[shopIndex].check = true;
			} else {
				orderlist[shopIndex].check = false;
			}
			for (let i = 0; i < orderlist.length; i++) {
				var indexNum = 0;
				if (orderlist[i].check == false) {
					orderlist[i].check = false;
				} else {
					indexNum = indexNum + 1;
					if (indexNum > 0 && orderlist[i].length == indexNum) {
						orderlist[i].check = true;
					}
				}
			}
			that.setAllSel();

			this.zongji()
		},
		Detail(e) {
			this.checkStatus(e)
		},
		setAllSel: function () { //是否全选
			let shopNum = 0;
			for (let i = 0; i < this.orderlist.length; i++) {
				if (this.orderlist[i].check == true) {
					shopNum = shopNum + 1;
				}
			}
			if (shopNum == this.orderlist.length && shopNum > 0) {
				this.allStatus = true;
			} else {
				this.allStatus = false;
			}
			if (this.getCarIds() == false) {
				this.selectNumber = 0
			} else {
				this.selectNumber = this.getCarIds().haveSel.length
			}
		},
		getCarIds() { //获取要结算的商品
			var that = this;
			var orderlist = that.orderlist;
			var haveSel = [];
			var arrprice = [];
			var xinOrderList = [];
			var arrNum = []
			for (let i = 0; i < orderlist.length; i++) {

				if (orderlist[i].check == true) {
					haveSel.push(orderlist[i].order_id);
					arrNum.push(orderlist[i].num);
					arrprice.push(orderlist[i].recovery_price);
					xinOrderList.push(orderlist[i])
					this.querenhuanlist = xinOrderList
					////console.log(xinOrderList, "新的")
				}
			}
			this.zongjijianshu = 0;
			arrNum.forEach(item => {
				this.zongjijianshu = this.zongjijianshu + item
			})
			////console.log(this.zongjijianshu, "总计件数")
			if (haveSel.length == 0) {
				return false;
			}
			var info = {
				haveSel: haveSel,
				arrprice: arrprice
			};
			// let cartIds = haveSel.join(',');
			return info;
		},
		goFahuo() {
			let order_idarr = this.getCarIds()
			if (order_idarr == false) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				})
				return
			}
			uni.navigateTo({
				url: "/luckdraw/pages/shopfahuo?order_id=" + this.order_id + '&order_idarr=' + JSON.stringify(
					order_idarr)
			})
		},
		classification(i) {
			this.page = 1;
			this.checkIndex = i;
			this.status = i;
			this.orderlist = []
			this.allStatus = false;
			this.getlist()
		},
		jimaiAndfahuo(order_id) {
			this.order_id = order_id
			let data = {
				order_id: this.order_id
			}
			this.$Request.get(this.$api.order.exchangePreview, data).then(res => {
				this.jimaiyulan = res.data

			});
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #262626;

	.top_txt {
		width: 88%;
		height: 68rpx;
		margin: auto;
		font-size: 24rpx;
		font-weight: 400;
		color: #E1E1E1;
		padding-top: 5rpx;
		line-height: 34rpx;
	}

	.zengsong_popop {
		width: 640rpx;
		min-height: 364rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 53rpx 0 67rpx 0;

		.input {
			width: 588rpx;
			height: 68rpx;
			background: #FFFFFF;
			border: 1px solid #BCBEBE;
			border-radius: 44rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			input {
				padding-left: 20rpx;
			}
		}

		.pop_top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.pop_title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 40rpx;
		}

		.sec {
			margin: 0 auto;
			margin-top: 42rpx;
			padding-left: 36rpx;
			border: 1rpx solid #707070;
			width: 570rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		.duihuanpop_box {
			width: 596rpx;
			height: 300rpx;
			overflow: hidden;
			overflow: auto;
			margin: auto;

			// background-color: #3EC2FF;
			.bot_box {
				width: 98%;
				height: 220rpx;
				margin: auto;
				// border-radius: 20rpx;
				// border: 2rpx solid #3EC2FF;
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(181, 181, 181, 0.18);
				border-radius: 14rpx 14rpx 14rpx 14rpx;

				.zhongjian_box {
					height: 178rpx;
					width: 92%;
					// background-color: #fff;
					display: flex;
					margin: auto;
					margin-top: 34rpx;
					justify-content: space-between;
					align-items: center;

					.left_box {
						width: 150rpx;
						height: 150rpx;
						border-radius: 18rpx 18rpx 18rpx 18rpx;
						border: 2rpx solid #5191FF;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right_box {
						width: 70%;
						height: 100%;

						.one_txt {
							margin-top: 10rpx;
							width: 350rpx;
							height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							font-weight: 500;
							color: black;
							line-height: 40rpx;
						}

						.two_txt {
							margin-top: 25rpx;
							width: 100%;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #FA2929;
							line-height: 40rpx;
						}

						.thr_txt {
							margin-top: 25rpx;
							width: 300rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #FA2929;
							line-height: 40rpx;
						}
					}
				}
			}
		}

		.bombtn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 70rpx;

			.left_bom {
				width: 166rpx;
				height: 66rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				background: #FFB02E;
				font-size: 32rpx;
				color: #fff;
			}

			.right_bom {
				width: 166rpx;
				height: 66rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 2rpx solid #FFB02E;
				color: #FFB02E;
				font-size: 32rpx;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		padding: 26rpx 20rpx;
		box-shadow: 0px 3rpx 10rpx rgba(0, 0, 0, 0.16);
		background: #262626;

		.top {
			height: 56rpx;
			background: #262626;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
				margin-left: 20rpx;
			}

			.yiduihuan_box {
				width: 300rpx;
				height: 40rpx;
				margin-left: 60rpx;

				.one_box {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
				}
			}
		}

		.bottom {
			.left {
				width: 218rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FED187 0%, #FFAE2A 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: white;
				// border: 2rpx solid #FFFFFF;
				border-radius: 20rpx;
			}
		}
	}

	.checkNav {
		color: #fd8e1b !important;
		border-bottom: 2rpx solid #fd8e1b !important;
	}

	.tuijian {
		background: #262626;
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		position: relative;

		.sec_right {
			position: absolute;
			right: 40rpx;
			top: 40rpx;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}

		.sec_bottom {
			.view_title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.bom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.left {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						max-width: 240rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.right {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 24rpx;
					background: #fd8e1b;
					border-radius: 10rpx;
					padding: 8rpx 26rpx 8rpx 26rpx;
				}
			}
		}

		.tuijian_con {
			width: 710rpx;
			margin: 25rpx auto;
			margin-bottom: 10rpx;
			border-radius: 20rpx;
			border: 1rpx solid #FED187;
			box-shadow: 0px 3rpx 11rpx rgba(0, 0, 0, 0.16);

			.sec_center {
				width: 710rpx;
				display: flex;
				margin: auto;
				padding: 20rpx 0;
				padding-left: 20rpx;
				align-items: center;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.left {
					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 20rpx;
					}
				}

				.center {
					padding: 10rpx 0 10rpx 0;
					border: 1rpx solid #FED187;
					border-radius: 20rpx;
					width: 200rpx;
					height: 200rpx;
					position: relative;

					.dengji_box_tl {
						position: absolute;
						left: 10rpx;
						top: 5rpx;
						width: 96rpx;
						height: 52rpx;
						color: #3EC2FF;
						font-weight: 500;
						line-height: 40rpx;
						text-align: center;

						image {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}

				.right {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding: 0 20rpx 0 0;
					box-sizing: border-box;

					.title {
						display: flex;
						align-items: center;

						text:nth-child(1) {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #282828;
						}

						text:nth-child(2) {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #fd8e1b;
						}
					}

					.name {
						width: 300rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #fff;
						margin-top: 6rpx;
						display: -webkit-box;
						text-align: justify;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.cont {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFAE2A;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
						padding-right: 20rpx;
						box-sizing: border-box;
						margin-top: 40rpx;
					}

					.bom {
						min-width: 320rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 2rpx;

						.left {
							display: flex;
							align-items: center;

							text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #000000;
							}
						}

						.right {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #ffffff;
							text-align: center;
							line-height: 24rpx;
							background: #fd8e1b;
							border-radius: 10rpx;
							padding: 16rpx 26rpx 16rpx 26rpx;
						}
					}
				}
			}
		}
	}

	.header {
		width: 750rpx;

		.category-list {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;
			padding: 20rpx;

			.icon {
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				font-size: 28rpx;
				margin-right: 50rpx;

				view {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #717171;
				}
			}
		}
	}
}</style>
